@extends('layouts.app', ['activePage' => 'panels', 'menuParent' => 'components', 'titlePage' => __('Panels')])

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="card ">
                        <div class="card-header ">
                            <h4 class="card-title">Navigation Pills -
                                <small class="description">Horizontal Tabs</small>
                            </h4>
                        </div>
                        <div class="card-body ">
                            <ul class="nav nav-pills nav-pills-warning" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
                                        Profile
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
                                        Settings
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#link3" role="tablist">
                                        Options
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content tab-space">
                                <div class="tab-pane active" id="link1">
                                    Collaboratively administrate empowered markets via plug-and-play networks.
                                    Dynamically procrastinate B2C users after installed base benefits.
                                    <br/>
                                    <br/> Dramatically visualize customer directed convergence without revolutionary
                                    ROI. Collaboratively administrate empowered markets via plug-and-play networks.
                                    Dynamically procrastinate B2C users after installed base benefits.
                                    <br/>
                                    <br/> This is very nice.
                                </div>
                                <div class="tab-pane" id="link2">
                                    Efficiently unleash cross-media information without cross-media value. Quickly
                                    maximize timely deliverables for real-time schemas.
                                    <br/>
                                    <br/>Dramatically maintain clicks-and-mortar solutions without functional solutions.
                                </div>
                                <div class="tab-pane" id="link3">
                                    Completely synergize resource taxing relationships via premier niche markets.
                                    Professionally cultivate one-to-one customer service with robust ideas.
                                    <br/>
                                    <br/>Dynamically innovate resource-leveling customer service for state of the art
                                    customer service.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card ">
                        <div class="card-header ">
                            <h4 class="card-title">Navigation Pills -
                                <small class="description">Vertical Tabs</small>
                            </h4>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="nav nav-pills nav-pills-rose flex-column" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#link4" role="tablist">
                                                Profile
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#link5" role="tablist">
                                                Settings
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#link6" role="tablist">
                                                Options
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-8">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="link4">
                                            Collaboratively administrate empowered markets via plug-and-play networks.
                                            Dynamically procrastinate B2C users after installed base benefits.
                                            <br>
                                            <br> Dramatically maintain clicks-and-mortar solutions without functional
                                            solutions. Dramatically visualize customer directed convergence without
                                            revolutionary ROI. Collaboratively administrate empowered markets via
                                            plug-and-play networks. Dynamically procrastinate B2C users after installed
                                            base benefits. This is very nice.
                                        </div>
                                        <div class="tab-pane" id="link5">
                                            Efficiently unleash cross-media information without cross-media value.
                                            Quickly maximize timely deliverables for real-time schemas.
                                            <br>
                                            <br>Dramatically maintain clicks-and-mortar solutions without functional
                                            solutions.
                                        </div>
                                        <div class="tab-pane" id="link6">
                                            Completely synergize resource taxing relationships via premier niche
                                            markets. Professionally cultivate one-to-one customer service with robust
                                            ideas.
                                            <br>
                                            <br>Dynamically innovate resource-leveling customer service for state of the
                                            art customer service.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Collapsible Accordion</h4>
                        </div>
                        <div class="card-body">
                            <div id="accordion" role="tablist">
                                <div class="card-collapse">
                                    <div class="card-header" role="tab" id="headingOne">
                                        <h5 class="mb-0">
                                            <a data-toggle="collapse" href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne" class="collapsed">
                                                Collapsible Group Item #1
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="collapseOne" class="collapse show" role="tabpanel"
                                         aria-labelledby="headingOne" data-parent="#accordion" style="">
                                        <div class="card-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                            richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                                            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
                                            tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                                            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                            wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                            synth nesciunt you probably haven't heard of them accusamus labore
                                            sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="card-collapse">
                                    <div class="card-header" role="tab" id="headingTwo">
                                        <h5 class="mb-0">
                                            <a class="collapsed" data-toggle="collapse" href="#collapseTwo"
                                               aria-expanded="false" aria-controls="collapseTwo">
                                                Collapsible Group Item #2
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"
                                         data-parent="#accordion">
                                        <div class="card-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                            richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                                            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
                                            tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                                            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                            wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                            synth nesciunt you probably haven't heard of them accusamus labore
                                            sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                                <div class="card-collapse">
                                    <div class="card-header" role="tab" id="headingThree">
                                        <h5 class="mb-0">
                                            <a class="collapsed" data-toggle="collapse" href="#collapseThree"
                                               aria-expanded="false" aria-controls="collapseThree">
                                                Collapsible Group Item #3
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="collapseThree" class="collapse" role="tabpanel"
                                         aria-labelledby="headingThree" data-parent="#accordion">
                                        <div class="card-body">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                            richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                                            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
                                            tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                                            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                            wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                            vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                            synth nesciunt you probably haven't heard of them accusamus labore
                                            sustainable VHS.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card ">
                        <div class="card-header ">
                            <h4 class="card-title">Navigation Pills Icons -
                                <small class="description">Vertical Tabs</small>
                            </h4>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <!--
                                              color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
                                          -->
                                    <ul class="nav nav-pills nav-pills-rose nav-pills-icons flex-column" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#link110" role="tablist">
                                                <i class="material-icons">dashboard</i> Home
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#link111" role="tablist">
                                                <i class="material-icons">schedule</i> Settings
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-8">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="link110">
                                            Collaboratively administrate empowered markets via plug-and-play networks.
                                            Dynamically procrastinate B2C users after installed base benefits.
                                            <br>
                                            <br> Dramatically visualize customer directed convergence without
                                            revolutionary ROI. Collaboratively administrate empowered markets via
                                            plug-and-play networks. Dynamically procrastinate B2C users after installed
                                            base benefits.
                                            <br/>
                                            <br/> Dramatically visualize customer directed convergence without
                                            revolutionary ROI. Collaboratively administrate empowered markets via
                                            plug-and-play networks. Dynamically procrastinate B2C users after installed
                                            base benefits.
                                        </div>
                                        <div class="tab-pane" id="link111">
                                            Efficiently unleash cross-media information without cross-media value.
                                            Quickly maximize timely deliverables for real-time schemas.
                                            <br>
                                            <br>Dramatically maintain clicks-and-mortar solutions without functional
                                            solutions.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto">
                    <div class="page-categories">
                        <h3 class="title text-center">Page Subcategories</h3>
                        <br/>
                        <ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center"
                            role="tablist">
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#link7" role="tablist">
                                    <i class="material-icons">info</i> Description
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#link8" role="tablist">
                                    <i class="material-icons">location_on</i> Location
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#link9" role="tablist">
                                    <i class="material-icons">gavel</i> Legal Info
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#link10" role="tablist">
                                    <i class="material-icons">help_outline</i> Help Center
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content tab-space tab-subcategories">
                            <div class="tab-pane" id="link7">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Description about product</h4>
                                        <p class="card-category">
                                            More information here
                                        </p>
                                    </div>
                                    <div class="card-body">
                                        Collaboratively administrate empowered markets via plug-and-play networks.
                                        Dynamically procrastinate B2C users after installed base benefits.
                                        <br>
                                        <br> Dramatically visualize customer directed convergence without revolutionary
                                        ROI.
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane active" id="link8">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Location of the product</h4>
                                        <p class="card-category">
                                            More information here
                                        </p>
                                    </div>
                                    <div class="card-body">
                                        Efficiently unleash cross-media information without cross-media value. Quickly
                                        maximize timely deliverables for real-time schemas.
                                        <br>
                                        <br> Dramatically maintain clicks-and-mortar solutions without functional
                                        solutions.
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="link9">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Legal info of the product</h4>
                                        <p class="card-category">
                                            More information here
                                        </p>
                                    </div>
                                    <div class="card-body">
                                        Completely synergize resource taxing relationships via premier niche markets.
                                        Professionally cultivate one-to-one customer service with robust ideas.
                                        <br>
                                        <br>Dynamically innovate resource-leveling customer service for state of the art
                                        customer service.
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="link10">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Help center</h4>
                                        <p class="card-category">
                                            More information here
                                        </p>
                                    </div>
                                    <div class="card-body">
                                        From the seamless transition of glass and metal to the streamlined profile,
                                        every detail was carefully considered to enhance your experience. So while its
                                        display is larger, the phone feels just right.
                                        <br>
                                        <br> Another Text. The first thing you notice when you hold the phone is how
                                        great it feels in your hand. The cover glass curves down around the sides to
                                        meet the anodized aluminum enclosure in a remarkable, simplified design.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection